/**
 * Created by user on 2017/9/21.
 */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { loginActions } from '../../actions';
import { push } from 'react-router-redux';
import Storage from '../../storage';
import { Form, Icon, Input, Button, Checkbox ,Row , Col ,Spin} from 'antd';
const FormItem = Form.Item;
class LoginForm extends Component{
    handleSubmit = (e) => {
        const { dispatch,history } = this.props;
        console.log(history);
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const { username, password } = values;
                let to_path = '';
                try {
                    to_path = history.location.state.from.pathname
                }catch (exp){}
                dispatch(loginActions.do_login({password,username},to_path));
            }
        });

    };
    render(){
        const { loginState } = this.props;
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="login_page">
                <div className="login_form">
                    <Spin spinning={ loginState.loading }>
                        <Row>
                            <Col span={24}>
                                <div className="login_title txt-center">欢迎</div>
                            </Col>
                        </Row>
                        <Form onSubmit={this.handleSubmit} className="login-form">
                            <FormItem>
                                {getFieldDecorator('username', {
                                    rules: [{ required: true, message: 'Please input your username!' }],
                                })(
                                    <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('password', {
                                    rules: [{ required: true, message: 'Please input your Password!' }],
                                })(
                                    <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('remember', {
                                    valuePropName: 'checked',
                                    initialValue: true,
                                })(
                                    <Checkbox>Remember me</Checkbox>
                                )}
                                <a className="login-form-forgot" href="">Forgot password</a>
                                <Button type="primary" htmlType="submit" className="width100">
                                    Log in
                                </Button>
                                Or <a href="">register now!</a>
                            </FormItem>
                        </Form>
                    </Spin>
                </div>
            </div>
        );
    }
}
const mapStateToProps = (state)=>{
    return {
        loginState:state.login
    }
};
const WrappedNormalLoginForm = Form.create()(LoginForm);
export default connect(mapStateToProps)(WrappedNormalLoginForm);